<template>
  <div class="basicInfo-wrap">
    <div class="basicInfoImg" :span="5">
      <el-image :src="basicInfo.productImgUrl" :preview-src-list="[basicInfo.productImgUrl]">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </div>
    <el-form ref="form" :model="basicInfo" label-width="80px">
      <el-form-item :label="$t('m.label.modelNumber')+':'">
        <el-input
          v-model="basicInfo.productModelNumber"
          size="small"
          class="editAble"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item :label="$t('m.label.BU')+':'">
        <el-select
          v-model="basicInfo.businessUnitId"
          :placeholder="$t('m.placeholder.selectBu')"
          size="small"
          filterable
          :disabled="disabled"
        >
          <el-option
            v-for="bu in businessUnitList"
            :key="bu.businessUnitId"
            :value="bu.businessUnitId"
            :label="bu.businessUnit"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('m.label.Brand')+':'">
        <el-select
          v-model="basicInfo.productBrandId"
          :placeholder="$t('m.placeholder.selectBrand')"
          size="small"
          filterable
          :disabled="disabled"
        >
          <el-option
            v-for="brand in brandList"
            :key="brand.productBrandId"
            :value="brand.productBrandId"
            :label="brand.productBrand"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('m.label.category')+':'">
        <el-select
          v-model="basicInfo.productCategoryId"
          :placeholder="$t('m.placeholder.selectCategory')"
          size="small"
          filterable
          :disabled="disabled"
        >
          <el-option
            v-for="productCategory in productCategoryList"
            :key="productCategory.productCategoryId"
            :value="productCategory.productCategoryId"
            :label="productCategory.productCategory"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('m.label.Long')+':'">
        <el-input-number
          size="small"
          controls-position="right"
          v-model="basicInfo.productLong"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('m.label.Volume')+':'">
        <el-input-number
          size="small"
          controls-position="right"
          v-model="basicInfo.productVolume"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('m.label.Material')+':'">
        <el-input v-model="basicInfo.productMaterial" size="small" value="材质" :disabled="disabled" />
      </el-form-item>
      <el-form-item :label="$t('m.label.Width')+':'">
        <el-input-number
          controls-position="right"
          v-model="basicInfo.productWidth"
          size="small"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('m.label.Grossweight')+':'">
        <el-input-number
          controls-position="right"
          v-model="basicInfo.productGrossweight"
          size="small"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('m.label.Certification')+':'">
        <el-input
          style="display:inline-block;"
          v-model="basicInfo.productCertification"
          size="small"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item :label="$t('m.label.Height')+':'">
        <el-input-number
          controls-position="right"
          v-model="basicInfo.productHeight"
          size="small"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('m.label.Netweight')+':'">
        <el-input-number
          controls-position="right"
          v-model="basicInfo.productNetweight"
          size="small"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('m.label.OrderDefect')+':'">
        <el-input-number
          controls-position="right"
          v-model="basicInfo.productOrderDefect"
          size="small"
          :step="0.01"
          :disabled="disabled"
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('m.label.U8Code')+':'">
        <el-input v-model="basicInfo.productU8Code" size="small" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item :label="$t('m.label.Status')+':'">
        <el-select
          v-model="basicInfo.status"
          :placeholder="$t('m.placeholder.selectStatus')"
          size="small"
          filterable
          :disabled="disabled"
        >
          <el-option :label="item | Status" :value="item" v-for=" item in status" :key="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('m.label.PackageContains') + ':'" label-width="90px" class="status">
        <el-input
          style="display:inline-block;"
          v-model="basicInfo.productPackageContains"
          size="small"
          :disabled="disabled"
        />
      </el-form-item>
      <el-form-item :label="$t('m.label.DescriptionChs')" class="description">
        <el-input
          type="textarea"
          v-model="basicInfo.productDescriptionChs"
          :placeholder="$t('m.label.DescriptionChs')"
          :autosize="{ minRows: 2, maxRows: 4}"
          :disabled="disabled"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('m.label.DescriptionEn')" class="description">
        <el-input
          type="textarea"
          v-model="basicInfo.productDescriptionEn"
          :placeholder="$t('m.label.DescriptionEn')"
          :autosize="{ minRows: 2, maxRows: 4}"
          :disabled="disabled"
        ></el-input>
      </el-form-item>
      <el-form-item class="block">
        <el-button
          @click="submitProduct"
          :type="disabled?'info':'primary'"
          :icon="disabled?'el-icon-edit':'el-icon-upload2'"
          size="small"
        >{{disabled?$t('m.button.edit'):$t('m.button.save')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
const ERR_OK = 200;
let that = "";
export default {
  data() {
    that = this;
    return {
      basicInfo: {},
      businessUnitList: [],
      brandList: [],
      productCategoryList: [],
      disabled: true,
      status: [1, 2, 3, -2, -3],
    };
  },
  filters: {
    Status(key) {
      switch (key) {
        case 1:
          return that.$t("m.label.inStock");
          break;
        case 2:
          return that.$t("m.label.Established");
          break;
        case 3:
          return that.$t("m.label.pendingProject");
          break;
        case -2:
          return that.$t("m.label.OffShelf");
          break;
        default:
          return that.$t("m.label.cancelProject");
          break;
      }
    },
  },
  methods: {
    onSubmit(form) {
      this.basicInfo = {};
      this.$ajax({
        method: "get",
        url:
          this.GLOBAL.productService +
          "/findProduct/" +
          form.codingType + (form.fieldValue?form.fieldValue:form.productModelNumber),
      }).then((res) => {
        if (res.data.code === ERR_OK) {
          if (
            res.data.data.productDetails.productId === 0 ||
            res.data.data.productDetails == null
          ) {
            this.$message.warning("查询产品结果为空!");
          } else {
            this.basicInfo = res.data.data.productDetails;
            this.businessUnitList = res.data.data.businessUnitList;
            this.brandList = res.data.data.brandList;
            this.productCategoryList = res.data.data.productCategoryList;
          }
        }
        this.$emit("getBasicInfo", this.basicInfo);
      });
    },
    submitProduct() {
      if (!this.basicInfo.productId) {
        this.$message.warning("产品无效!");
        return;
      }
      this.disabled = this.disabled ? false : true;
      if (this.disabled) {
        this.loading = true;
        if (this.basicInfo.productImgUrl) {
          this.basicInfo.productImgUrl = this.basicInfo.productImgUrl.substring(
            this.basicInfo.productImgUrl.indexOf("/static/")
          );
        }

        this.$ajax({
          method: "put",
          url:
            this.GLOBAL.productService +
            "/product/update/" +
            this.basicInfo.productId,
          data: this.basicInfo,
        }).then((res) => {
          if (res.data.code === ERR_OK) {
            this.$message.success("编辑成功");
          } else {
            this.$message.error(res.data.msg);
          }
          this.loading = false;
        });
      }
    },
  },
};
</script>
<style lang="stylus" scoped>
.el-form {
  padding: 10px;
  margin-left: 250px;
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    flex: 25% 0 0%;
    width: 25%;
    margin-bottom: 5px;

    .el-input, .el-select {
      width: 100%;
    }

    .el-input-number {
      width: 100%;
    }
  }

  .description {
    flex: 50% 0 0%;
    width: 50%;
  }

  @media only screen and (max-width: 1300px) {
    .el-form-item {
      flex: 50% 0 0%;
      width: 50%;
    }

    .description {
      flex: 100% 0 0%;
      width: 100%;
    }
  }
}

.basicInfoImg {
  float: left;
  width: 250px;
  height: 100%;
  position: relative;

  .el-image {
    width: 100%;
    position: static;

    .el-icon-picture-outline {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background: #f5f7fa;
      font-size: 100px;
      color: #999;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-icon-picture-outline {
      }
    }
  }
}

.basicInfo {
  background: #fff;
}
</style>
<style lang="stylus">
.basicInfo-wrap {
  .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
    text-align: left;
    color: #666;
  }

  .el-textarea.is-disabled .el-textarea__inner, .el-input__inner, .el-textarea__inner {
    border-radius: 0;
  }
}
</style>
